<!-- 左侧列表组件 -->
<template>
  <div class="mm-left-container flex flex-col h-full">
    <div class="mm-left-con-box">
      <!-- 查询 -->
      <div class="mm-l-query">
        <div class="w-full flex items-center" style="gap: 4px">
          <el-input prefix-icon="el-icon-search" v-model="queryContent" class="jtyj-input" clearable></el-input>
          <el-badge :value="filterNum" class="item" :hidden="filterNum == 0">
            <el-popover placement="top" :title="$t('tool.rightMenu.showFilter')" trigger="hover">
              <el-button slot="reference" class="jtyj-btn-s" type="info" style="width: 32px; height: 32px"
                @click="openFilter">
                <span role="img" class="appIcon">
                  <svg-icon icon-class="filter" width="16" height="16" />
                </span>
              </el-button>
            </el-popover>
          </el-badge>
          <el-popover v-if="!isUseCustomData" placement="bottom-start" title="" trigger="hover" :visible-arrow="false">
            <div class="dropdown-menu">
              <div class="menu-item mx-1" v-for="menu in right_menuList.rightMenuList_1" :key="menu.id"
                @click="handleMenuClick(menu)">
                <div class="flex items-center">
                  <span role="img" class="appIcon" style="font-size: 16px; margin-right: 5px">
                    <svg-icon :icon-class="menu.icon" width="16" height="16" />
                  </span>
                  {{ $t("tool.rightMenu." + menu.i18nName) }}
                </div>
              </div>
            </div>
            <el-button slot="reference" class="jtyj-btn-s" type="primary" style="width: 32px; height: 32px">
              <span role="img" class="appIcon">
                <svg-icon class="jtyj-primary-color" icon-class="add" width="16" height="16" />
              </span>
            </el-button>
          </el-popover>
        </div>
        <div class="filer-box" :class="isFilterOpen ? '' : 'hidden-height'">
          <div class="filter-item">
            <el-select v-model="filters.status" clearable placeholder="状态" class="jtyj-select">
              <el-option label="启用" value="enabled"></el-option>
              <el-option label="禁用" value="disabled"></el-option>
            </el-select>
          </div>
          <div class="filter-item">
            <el-select v-model="filters.tags" clearable placeholder="标签" class="jtyj-select">
              <el-option label="标签1" value="tag1"></el-option>
              <el-option label="标签2" value="tag2"></el-option>
            </el-select>
          </div>
          <div class="filter-item">
            <el-select v-model="filters.owner" clearable placeholder="责任人" class="jtyj-select">
              <el-option label="张三" value="zhangsan"></el-option>
              <el-option label="李四" value="lisi"></el-option>
            </el-select>
          </div>
          <div class="filter-item">
            <el-select v-model="filters.creator" clearable placeholder="创建人" class="jtyj-select">
              <el-option label="张三" value="zhangsan"></el-option>
              <el-option label="李四" value="lisi"></el-option>
            </el-select>
          </div>
          <div class="filter-item">
            <el-select v-model="filters.lastModifier" clearable placeholder="最后修改人" class="jtyj-select">
              <el-option label="张三" value="zhangsan"></el-option>
              <el-option label="李四" value="lisi"></el-option>
            </el-select>
          </div>
          <div class="filter-item">
            <el-radio-group class="common-radio-group" v-model="filters.matchType" size="mini">
              <el-radio-button label="匹配"></el-radio-button>
              <el-radio-button label="排除"></el-radio-button>
            </el-radio-group>
          </div>
        </div>
      </div>
      <!-- 树本身 -->
      <div class="mm-l-tree-body" :class="isExpandOwnTree ? '' : 'hidden-height'">
        <Tree ref="ownTreeRef" :isOwnAccount="true" :isUseCustomData="isUseCustomData" :treeData="treeData"
          :folderMenu="right_menuList && right_menuList.rightMenuList_3" :fileMenu="right_menuList && right_menuList.rightMenuList_4"
          :currentNodeKey="currentNodeKey" :defaultExpandedKeys="defaultExpandedKeys" @handleMenuClick="handleMenuClick"
          @handleAddNode="handleAddNode" @nodeClick="nodeClick" @refresh="refresh" @moveNodeOrder="moveNodeOrder">
        </Tree>
      </div>

    </div>
  </div>
</template>

<script>
import { addModel, deleModel } from "@/api/myspace/model-manage-tool/model-manage";
import Tree from "./tree.vue";
export default {
  data() {
    return {
      isExpandOwnTree: true,
      isExpandShareTree: true,
      queryContent: "",
      searchValue: null,
      currentSelectedNode: null, // 当前选中的节点
      currentTreeCategory: 1, // 当前树展示的类别,模型或者模型组
      isShowTree: true, // 是否展开数据模型下的树,默认不展开
      isExpandTreeNode: true, // 是否展开树节点
      isFilterOpen: false,
      filters: {
        status: "",
        tags: "",
        owner: "",
        creator: "",
        lastModifier: "",
        matchType: "include",
      },
    };
  },
  computed: {
    filterNum() {
      return Object.values(this.filters).filter((item) => item).length - 1;
    },
  },
  props: {
    currentNodeKey: {
      type: Number,
      default: 0,
    },
    defaultExpandedKeys: {
      type: Array,
      default: () => [],
    },
    isUseCustomData: {
      type: Boolean,
      default: false,
    },
    right_menuList: {
      type: Object,
      default: () => {
      },
    },
    treeData: {
      type: Array,
    },
    shareTreeData: {
      type: Array,
    },
  },
  components: {
    Tree,
  },
  watch: {
    queryContent: {
      handler(newVal, oldVal) {
        Object.keys(this.$refs).forEach((item) => {
          if (Array.isArray(this.$refs[item])) {
            this.$refs[item][0].$refs.treeRef.filter(newVal);
          } else {
            this.$refs[item].$refs.treeRef.filter(newVal);
          }
        });
      },
    },
    filters: {
      handler(newVal, oldVal) {
        this.applyFilters();
      },
      deep: true,
    },
  },

  methods: {
    deleteNode() {
      this.$refs.ownTreeRef.deleteNode()
    },
    // 刷新树结构数据
    refresh() {
      this.$emit("refresh");
    },
    // 移动树节点的顺序
    moveNodeOrder(draggingNode, dropNode, dropType) {
      this.$emit("moveNodeOrder", draggingNode, dropNode, dropType);
    },
    //显示筛选条件
    openFilter() {
      this.isFilterOpen = !this.isFilterOpen;
    },
    applyFilters() {
      const filterCriteria = this.filters;
      // 根据 filterCriteria 过滤树节点
      // 这里需要根据你的树节点数据结构来实现具体的过滤逻辑
      // 示例：
      const filteredData = this.treeData.filter((node) => {
        // 根据 filterCriteria 过滤节点
        // 例如：检查状态、标签、责任人等
        return true; // 这里需要实现具体的过滤逻辑
      });
      this.$refs["ownTreeRef"].$refs.treeRef.filter(filteredData);
    },
    //记录当前节点
    // handleNodeClick(data) {
    //   this.currentSelectedNode = data;
    //   this.$nextTick(() => {
    //     this.$refs.treeRef.setCurrentKey(this.currentSelectedNode.key);
    //   });
    //   this.$emit("nodeClick", data, this.currentTreeCategory);
    // },
    // 树节点点击事件
    nodeClick(nodeData, readonly) {
      this.$emit("nodeClick", nodeData, readonly);
    },
    handleExpandOwn() {
      this.isExpandOwnTree = !this.isExpandOwnTree;
    },
    handleExpandShare() {
      this.isExpandShareTree = !this.isExpandShareTree;
    },
    // 点击菜单项触发的事件
    handleMenuClick(menu, node) {
      switch (menu.name) {
        case "新增数据模型":
        case "新增装备模型":
          this.handleAddModel(node);
          break;
        case "新增分类":
          this.handleAddOrUpdateFolder("add");
          break;
        case "添加子目录":
          this.handleAddOrUpdateFolder("add", node);
          break;
        case "编辑":
          this.handleAddOrUpdateFolder("edit", node);
          break;
        case "复制":
          // 文件的复制
          this.handleCopyFile(node);
          break;
        case "删除":
          // 文件夹/文件的删除
          this.handleDeleteFile(node);
          break;
      }
    },
    // 新增或修改文件夹
    handleAddOrUpdateFolder(sign, node) {
      this.$emit("addOrUpdateFolder", sign, node);
    },
    // 新增数据模型
    handleAddNode(node) {
      this.$emit("addNode", node);
    },

    // 复制文件
    handleCopyFile(node) {
      addModel({
        modelName: node.data.modelName + " Copy",
        modelEnglishName: node.data.modelEnglishName + " Copy",
        modelAlias: node.data.modelAlias + " Copy",
        parentId: node.data.parentId,
        nodeType: node.type, // 0表示文件夹，1表示文件
        categoryLabel: node.data.categoryLabel,
        modelResolution: node.data.modelResolution,
        modelDescription: node.data.modelDescription,
        modelType: node.data.modelType, // 0表示标准模型，1表示代理模型，2表示数字样机
        userId: node.data.userId,
      }).then((response) => {
        if (response.code == 200) {
          this.$message.success(
            this.$toolHandle.getI18nName(
              this.$zh.setup.responseText,
              this.$en.setup.responseText,
              this.$i18n.locale,
              "success"
            )
          );
          this.$emit("refresh");
        }
      });
    },
    // 删除文件夹/文件
    handleDeleteFile(node) {
      this.$confirm(
        `确定删除${node.type == 0 ? "目录" : "数据模型"}  ${node.data.modelName
        } ?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          customClass: "message-box-style",
          type: "warning",
        }
      )
        .then(() => {
          deleModel(node.id).then((response) => {
            if (response.code == 200) {
              this.$message.success(
                this.$toolHandle.getI18nName(
                  this.$zh.setup.responseText,
                  this.$en.setup.responseText,
                  this.$i18n.locale,
                  "success"
                )
              );
              this.$emit("nodeDelete", node);
            }
          });
        })
        .catch(() => { });
    },
  },
};
</script>

<style lang="scss" socped>
.mm-left-container {
  width: 100%;
  background-color: var(--ui-component-background);

  .mm-left-con-box {
    width: 100%;
    height: 100%;
    position: relative;

    .mm-l-query {
      margin: 8px 0;
      padding: 0 8px;
      margin-bottom: 12px;
      z-index: 10;
    }

    .mm-l-tree {
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      color: var(--ui-text-color);
    }

    .mm-l-tree-header {
      height: 40px;
      line-height: 40px;
      padding-left: 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: var(--ui-text-color);
      border-bottom: 1px solid var(--ui-border-color-split);

      .icon-box {
        height: 32px;
        visibility: hidden;
      }

      &:hover {
        .icon-box {
          visibility: visible;

          .item-icon {
            width: 32px;
            height: 100%;

            &:hover {
              background-color: var(--ui-btn-text-hover-bg);
              border-radius: 6px;
            }
          }
        }
      }
    }

    .mm-l-tree-body {
      // flex: 1;
      min-height: 0;
      max-height: calc(100% - 56px);
      overflow-x: hidden;
      overflow-y: auto;
      padding: 5px;
      box-sizing: border-box;
      transition: all 0.5s ease;

      .mm-l-unit-title {
        height: 32px;
        line-height: 32px;
        padding-left: 8px;
      }
    }

    .mm-l-tree-own {
      border-bottom: 1px solid var(--ui-border-color-split);
      box-sizing: border-box;
    }
  }
}
</style>
<style scoped>
.filer-box {
  min-height: 0px;
  max-height: 124px;
  display: flex;
  flex-wrap: wrap;
  transition: all 0.5s ease;
}

.filter-item {
  width: 50%;
  padding: 5px 5px 0 0;
}

.filter-item ::v-deep .el-radio-group {
  display: flex;
}
</style>